<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>rcarousel – multi carousels on a page</title>
        <link type="text/css" rel="stylesheet" href="css/reset.css" />			
        <link type="text/css" rel="stylesheet" href="css/style.css" />		
        <link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
		<style type="text/css">
			#carousels {
				width: 500px;
				height: 500px;
				margin: 0 auto;
				position: relative;
			}
			#carousel1 {
				width: 500px;
				position: absolute;
				left: 0;
				top: 0;
			}

			#carousel2 {
				width: 100px;
				position: absolute;
				left: 400px;
				top: 100px;
			}

			#carousel3 {
				width: 500px;
				position: absolute;
				left: 0;
				top: 400px;
			}

			#carousel4 {
				width: 100px;
				position: absolute;
				left: 0;
				top: 100px;
			}

			#carousel5 {
				width: 200px;
				position: absolute;
				left: 100px;
				top: 100px;
			}

			#carousel6 {
				width: 100px;
				position: absolute;
				left: 300px;
				top: 100px;
			}

			#carousel7 {
				width: 200px;
				position: absolute;
				left: 200px;
				top: 300px;
			}

			#carousel8 {
				width: 100px;
				position: absolute;
				left: 100px;
				top: 200px;
			}

			#carousel9 {
				width: 100px;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<p>
				This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
				Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
			</p>
		</div>
		
		<div id="content">
			<h1>multiple carousels on a page</h1>
			
			<div id="carousels">
				<div id="carousel1">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
				
				<div id="carousel2">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
				
				<div id="carousel3">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
				
				<div id="carousel4">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
	
				<div id="carousel5">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
				
				<div id="carousel6">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
				
				<div id="carousel7">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />
				</div>
				
				<div id="carousel8">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />				
				</div>
	
				<div id="carousel9">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />
				</div>
			</div>
		</div>


		<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.core.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.rcarousel.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				$("#carousel1").rcarousel({
					visible: 5,
					step: 1,
					auto: {
						enabled: true,
						direction: "prev"
					}
				});

				$("#carousel2").rcarousel({
					visible: 3,
					step: 1,
					orientation: "vertical",
					auto: {enabled: true}
				});

				$("#carousel3").rcarousel({
					visible: 5,
					step: 1,
					auto: {enabled: true}
				});

				$("#carousel4").rcarousel({
					visible: 3,
					step: 1,
					orientation: "vertical",
					auto: {enabled: true}
				});

				$("#carousel5").rcarousel({
					visible: 2,
					step: 1,
					auto: {enabled: true}
				});

				$("#carousel6").rcarousel({
					visible: 2,
					step: 1,
					orientation: "vertical",
					auto: {enabled: true}
				});

				$("#carousel7").rcarousel({
					visible: 2,
					step: 1,
					auto: {enabled: true}
				});

				$("#carousel8").rcarousel({
					visible: 2,
					step: 1,
					orientation: "vertical",
					auto: {enabled: true}
				});

				$("#carousel9").rcarousel({
					visible: 1,
					step: 1,
					auto: {enabled: true}
				});
			});
		</script
    </body>
</html>